<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});

const emits = defineEmits(["click"]);

function handleClick(index: number) {
  emits("click", index);
}
</script>
"
<template>
  <div class="side-item-list">
    <div
      v-for="(item, index) in list"
      :key="item.id"
      :class="item.isActive ? 'side-item-active' : 'side-item'"
      @click="handleClick(index)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<style scoped lang="less">
@import "../theme.less";
.side-item-list {
  display: flex;
  flex-direction: column;
  .side-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px 4px;
    box-sizing: border-box;
    width: 62px;
    height: 28px;
    font-size: 13px;
    cursor: pointer;
    color: @color-text-secondary;
  }
  .side-item-active {
    .side-item();
    background-color: @primary-light-1;
    color: #0084ff;
    font-weight: bold;
  }
}
</style>
